<template>
	<view class="order-item">
		<view class="fsb c-72 fz22 head p-b-20">
			<view class="">类型：正价订单</view>
			<view>{{getText(2)}}</view>
		</view>
		<view class="p-t-30 p-b-30 df">
			<view class="pr">
				<view class="mask">商品已断货</view>
				<image src="https://z3.ax1x.com/2021/08/08/flmLin.jpg" mode="" style="width: 160rpx;height:160rpx;border-radius: 7rpx;"></image>
			</view>
			<view class="ml-30 f1 df column" style="justify-content: space-between;">
				<view class="fz24 c-000 mb-14">2020时尚新款夏季女装轻熟风气质穿搭洋气大码度假休闲连衣裙</view>
				<!-- <view class="fz18 c-57 mb-10 tip">此订单将在15分钟后失效</view> -->
				<view class="fsb mb-14">
					<view class="fz24 fw-b c-000">￥65</view>
					<view class="c-ae fz22">共 3 件</view>
				</view>
				
			</view>
		</view>
		<view style="border-top: 1px solid #EBEBEB;" class="p-t-30">
			<view class="fsb fz30 fw-b mb-30">
				<view class="fz30">商品合计</view>
				<view class="">￥260</view>
			</view>
			<view class="fsb fz24 c-ae">
				<view class="">运费</view>
				<view class="">包邮</view>
			</view>
		</view>

				<!-- <view class="btn-order red">立即付款</view> -->

	</view>
</template>

<script>
	export default {
		props: {
			datas: {
				type: Object 
			}
			
		},
		data() {
			return {

			};
		},
		methods: {
			getText(type) {
				switch (type) {
					case 2 :
						return '待支付'
					case 3 :
						return '待发货'
					case 4 :
						return '待收货'
					case 5 :
						return '售后'
				}
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		border-radius: 22rpx;
		box-shadow: 0px 7rpx 29rpx -5rpx rgba(114, 124, 142, 0.11);
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;

		.head {
			paddind-bottom: 20rpx;
			border-bottom: 1px solid #EBEBEB;
		}

		.btn-order {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border: 1px solid #ccc;
			color: #666;
			border-radius: 7rpx;
			font-size: 24rpx;
			margin-left: 20rpx;

			&.red {
				border: 1px solid #FE5634;
				color: #FE5634;
			}
		}

		.tip {
			padding: 4rpx;
			width: 220rpx;
			background-color: rgba(87, 59, 209, .1);
			border-radius: 6rpx;
		}
		.mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width:100%;
			background-color: rgba(0,0,0,.5);
			color: #fff;
			font-size: 18rpx;
			line-height: 36rpx;
			z-index: 10;
			text-align: center;
			border-radius:  0 0 7rpx 7rpx;
		}
	}
</style>
